<script setup lang="ts">
import AnswerSheet from './answer_sheet.vue'
import {SheetItem, get_year_answer_sheet,get_chapter_answer_sheet, GetSheetFunc} from './answer_sheet'
import { Progress,get_chapters_progress,get_years_progress } from './progress'
import { PropType } from '@vue/runtime-core'
import { onBeforeRouteUpdate } from 'vue-router'

const emit=defineEmits(['sheet-selected'])
const props=defineProps({
  type:String as PropType<'year'|'subject'>,
  token:Number,
})

const current_expanding=ref(-1)
const progress_array=ref([] as  Array<Progress>)
const sheet_map=ref(new Map() as Map<number,Array<SheetItem>>)
const is_loaded=ref(false)
let get_sheet:GetSheetFunc

const refresh=async ()=>{
    is_loaded.value=false
    progress_array.value=[]
    switch(props.type){
    case 'year':
      progress_array.value=await get_years_progress()
      get_sheet=get_year_answer_sheet
      break
    case 'subject':
      progress_array.value=await get_chapters_progress(props.token)
      get_sheet=get_chapter_answer_sheet
      break
    default:
      console.error('Tiku.vue','Invalid progress type:',props.type)
  }
  console.log(`Get progress array of ${props.type}[${props.token}]`)
  console.dir(progress_array.value)
  is_loaded.value=true
}

onMounted(async()=>{
  progress_array.value=[]
  console.log('tiku on mounted props:')
  await refresh()
})

watch(()=>[props.type,props.token],async (oldval,newval)=>{
  console.log('tiku watch props changed:',newval)
  await refresh()
})

const item_expand=async (item_name:string)=>{
  console.log(`Item[${item_name}] is expanded.`)
  const key=+item_name
  current_expanding.value=key
  if (!is_loading(key)) {
    return
  }
  let answersheet=await get_sheet(key)
  console.log(`Get answersheet:`)
  console.dir(answersheet)
  sheet_map.value.set(key,answersheet)

}
const is_loading=(year:number)=>{
  let flag= sheet_map.value.has(year)
  return !flag
}

const number_to_percent=(n:number)=>{
  return ((n*100).toFixed(0))+'%'
}

const sheet_selected=(qid:number)=>{
  console.log('Select sheet of year:'+current_expanding.value)
  console.log('Question id of sheet:'+qid)
  emit('sheet-selected',sheet_map.value.get(current_expanding.value),qid)
}
</script>

<template>
<el-scrollbar height="100%" v-loading="!is_loaded" element-loading-background="#000">
  <el-collapse accordion @change="item_expand">
    <el-collapse-item v-for="progress in progress_array" :key="progress.title" :name="progress.key">
      <template #title>
        <div class="item-title">
          <span v-if="progress.undo_percent==0">✅</span>
          <span v-else>☑️</span>
          <h1>{{progress.title}}</h1>
          <div class="progress card">
            <span class="label">完成率</span>
            <span class="value">{{number_to_percent(1-progress.undo_percent)}}</span>
          </div>
          <div class="accuracy card">
            <span class="label">正确率</span>
            <span class="value">{{number_to_percent(progress.right_percent)}}</span>
          </div>
        </div>
      </template>
      <AnswerSheet 
      @question-selected="sheet_selected"

      :sheet="sheet_map.get(progress.key)" 
      v-loading="is_loading(progress.key)"
      ></AnswerSheet>
    </el-collapse-item>
  </el-collapse>
  </el-scrollbar>
</template>

<style scoped lang="scss">

.el-collapse{
  background-color: transparent;
}
.el-collapse-item{
  --el-collapse-header-bg-color:#333;
  --color:aliceblue;
  --el-collapse-content-bg-color:#333;
}
.item-title{
  width: 100%;
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  column-gap: 10px;
  align-items: center;
  justify-content: start;
  padding-right: 10px;
  h1{
    color: aliceblue;
    font-size: 1.2rem;
    text-shadow: 2px 2px dodgerblue;
    text-align: left;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .card{
    border: 1px solid dodgerblue;
    height: 20px;
    border-radius: 5px;
    display: flex;
    width: 102px;
    padding:0;
    span{
      color: aliceblue;
      height: 20px;
      line-height: 20px;
      border: none;
    }
    .label{
      background-color: dodgerblue;
      color: #333;
      width: 60px;
    }
    .value{
      width: 40px;
    }
    &.accuracy {
      border-color: chartreuse;
      .label{
        background-color: chartreuse;
      }
    }
  }
}
</style>
